// 导航栏 图书类型选择时切换对应的图书
<template>
  <div>
    <!-- 路由自带对象route 放置路由的相关数据-->
    <!-- 当前图书类型id=={{$route.params.id}} -->
    <div class="type-title">{{ bookType }}</div>
    <Loading v-if="isLoading" />
    <BooksList v-else :Books="books" />
    <Pager
      :page="page"
      :limit="limit"
      :total="total"
      :panelNumber="panelNumber"
      @changePage="handelPage"
    />
  </div>
</template>

<script>
// import Center from "@/components/Center";
import BooksList from "@/components/BooksList";
import Loading from "@/components/Loading";
import * as BooksService from "@/services/BooksService";
import Pager from "@/components/Pager";

export default {
  components: {
    // Center,
    BooksList,
    Loading,
    Pager,
  },
  created() {
    console.log("HeaderType组件创建了");
    console.log("动态路由==" + this.$route.params.id);
    // this.getTypeName();
    // this.getBooksList();
  },
  destroyed() {
    console.log("HeaderType组件被销毁了");
  },
  data() {
    return {
      books: [],
      bookType: null,
      isLoading: true,
      // page: 3, //page应该是url传过来的，不能写死，
      limit: 2,
      total: 100,
      panelNumber: 10,
    };
  },
  methods: {
    // 获得所有的typeName
    async getTypeName() {
      let types = await BooksService.getBookTypes();
      let type = types.find((item) => {
        return item.typeId === this.$route.params.id;
      });

      this.bookType = type.typeName;
    },
    // 获取图书列表
    async getBooksList() {
      this.isLoading = true;
      let resp = await BooksService.getBooksList(
        this.$route.params.id,
        this.page,
        this.limit
      );
      let newData = resp.data;
      this.books = newData.list;
      this.isLoading = false;
    },
    // 捕获选择页码
    handelPage(newPage) {
      this.page = newPage;
     // 编程式路由 精简版
      // this.$router.push("?page=" + newPage);

      // 编程式路由 原始版
      this.$router.push({
        // name: "Channels",//组件命名路径
        // params: {
        //   id: this.$route.params.id,
        // },
        query: {
          page: newPage,
        },
      }),
      this.getBooksList();
    },
  },
  // 监听头部切换事件 界面创建的时候开始监听
  watch: {
    "$route.params.id": {
      // 表示创建的时候就开启监听
      immediate: true,
      //只要$route.params.id有变化，就会执行handler方法
      handler() {
        // 切换后页码回到第一页
        // this.page = 1;
        // 获取图书类型 图书列表
        this.getTypeName();
        this.getBooksList();
      },
    },
  },
  computed: {
    page() {
      //this.$route.query.page有值就直接转换为数值类型
      // 没有值那么就是第一页 得到的是String类型 使用+转换为Number类型
      return +this.$route.query.page || 1;
    },
  },
};
</script>

<style scoped>
.type-title {
  font-size: 2em;
  color: #888;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}
</style>
